<template>
	<view class="uni_box home">
		<navbar title='支付' :yin="true">
		</navbar>
		<view class="content">
			<view class="blist">
				<view class="bitem">
					<text class="lname">订单编号：</text><text class="rname">{{order.order_sn}}</text>
				</view>
				<view class="bitem">
					<text class="lname">支付金额：</text><text class="rname price">￥{{order.order_money}}</text>
				</view>
				<view class="xuan">
					<text class="xtit">选择支付方式</text>
					<view class="zhiitem" :class="payinfo.id==item.id?'zactive':''" v-for="(item,index) in paylist" :key="index" @click="getzhi(item)">
						<image class="wei" :src="item.icon" mode="" />
						<text class="zhiname">{{ item.name }}</text>
						<u-icon class="ricon" name="checkmark-circle" color="#AAAAAA" size="35"></u-icon>
						<u-icon class="ricons" name="checkmark-circle-fill" color="#1CAB43" size="35"></u-icon>
					</view>
					<!-- <view class="zhiitem">
						<image class="wei" src="@/pages_subject/static/img/zhi.png" mode="" style="height: 42rpx;" />
						<u-icon class="ricon" name="checkmark-circle" color="#AAAAAA" size="35"></u-icon>
						<u-icon class="ricons" name="checkmark-circle-fill" color="#1CAB43" size="35"></u-icon>
						
					</view> -->

					<view class="tishi">
						<text class="tiname">请立即完成支付，如未完成支付退出页面，需要重新支付操作！
点击立即付款，即表示您已经同意 <text class="tibiao">《融跃支付协议》</text> </text>
					</view>

					<view class="fukuan" @click="fukuan">立即付款</view>
				</view>
			</view>
		</view>

		<view style="display: none;width: 0;height: 0;" v-html="payForm"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				coupon_id:'',
				order:{},
				paylist:[],
				payinfo:{},
				payForm: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.coupon_id = option.coupon_id
			this.getcreatorder();
			this.getpay()
		},
		onShow() {
		},
		methods: {
			async getcreatorder(){
				let res = await this.$u.api.createOrder({
					id:this.id,
					coupon_id:this.coupon_id|''
				});
				this.order = res
			},
			async getpay(){
				let res = await this.$u.api.getPayment({
					id:this.id,
					coupon_id:this.coupon_id|''
				});
				this.paylist = res
				this.payinfo = res[0]
			},
			getzhi(item){
				this.payinfo = item
			},
			async fukuan(){
				if(this.payinfo.code == 'money'){
					let res = await this.$u.api.payMoney({
						id:this.order.order_id
						// pay_type:this.payinfo.id
					});
					this.$u.toast("支付成功");
					setTimeout(() => {
						this.navrouter('/'+res.page)
					}, 1500);
					

				}else if(this.payinfo.code == 'wechat'){
					//微信支付
					
					let res = await this.$u.api.payWechat({
						id:this.order.order_id
						// pay_type:this.payinfo.id
					});
					console.log(res)
					this.payForm = res;
					this.$nextTick(()=>{
					document.forms['alipay_submit'].submit();
					});

				}else{
					this.$u.toast("请先对接支付");
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding: 0 30rpx;
		.blist{
			display: flex;
			flex-direction: column;
			margin-top: 50rpx;
			.bitem{
				padding: 25rpx 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				.lname{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
				.rname{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
				.price{
					color: #E74339;
				}
			}
			.xuan{
				margin-top: 40rpx;
				.xtit{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					display: block;
					margin-bottom: 40rpx;
				}
				.zhiitem{
					padding: 15rpx 27rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 30rpx;
					.ricon{
						margin-left: auto;
						display: inline-block;
					}
					.ricons{
						margin-left: auto;
						display: none;
					}
				}
				.wei{
					width: 42rpx;
					height: 38rpx;
					
				}
				.zhiname{
					color: #333;
					font-size: 26rpx;
					font-weight: 500;
				}
				.zactive{
					.ricon{
						margin-left: auto;
						display: none;
					}
					.ricons{
						margin-left: auto;
						display: inline-block;
					}
				}

				.tishi{
					.tiname{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #AAAAAA;
						display: block;
						text-align: center;
					}
					.tibiao{
						color: #E74339;
					}
				}
				.fukuan{
					height: 72rpx;
					background: #E74339;
					border-radius: 36rpx;
					display: flex;
					margin-top: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				
			}
		}
	}
</style>
